<template>
<div>
  <el-divider content-position="center">审核总览</el-divider>
  <template>
    <div class="user-opt">
      <el-radio-group v-model="radio">
        <el-radio :label="0">待审批</el-radio>
        <el-radio :label="1">已通过</el-radio>
        <el-radio :label="2">已驳回</el-radio>
      </el-radio-group>
      <div>
        <el-button type="success" @click="toggleSelection()">取消选择</el-button>
        <el-button type="danger" @click="batchApproval">批量审批</el-button>
      </div>
    </div>
  </template>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        label="地区"
        width="120">
      <template slot-scope="scope">{{ scope.row.region }}</template>
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="120">
    </el-table-column>
    <el-table-column label="营业执照" width="150">
      <template slot-scope="{row}">
        <el-image
            style="width: 50px; height: 50px"
            :src="row.img"
            :preview-src-list="srcList">
        </el-image>
      </template>
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态"
        show-overflow-tooltip
        width="120">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.status === '待审核' ? 'warning' : (scope.row.status === '驳回' ? 'danger' : 'success')"
            disable-transitions>{{scope.row.status}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="phone"
        label="手机号"
        width="120">
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">

  </div>
</div>
</template>

<script>
export default {
  name: "AddAgent",
  data() {
    return {
      radio:0,
      tableData: [],
      multipleSelection: [],
      srcList: [],
      selection:[],
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val)
    },
    batchApproval(){
      this.$confirm('请选择您的操作', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '全部通过',
        cancelButtonText: '全部驳回'
      }).then(() => {
        this.opt("1")
      }).catch(action => {
        this.opt("2")
      });
    },
    opt(v){
      axios({
        method:'post',
        url:`http://localhost:8081/boss/batchApproval/${v}`,
        data:{
          list: this.multipleSelection
        }
      }).then(res => {
        if (res.data.code === 500){
          this.$message.error('批量更新失败，请联系管理员!');
        }else{
          this.$message({
            message: '更新成功!',
            type: 'success'
          });
          location.href = '/auditOverview'
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    axios({
      method:'get',
      url:`http://localhost:8081/boss/getStatusList/${this.radio}`
    }).then(res => {
      this.tableData = res.data.data
    }).catch(err => {
      console.log(err)
    })
  },
  watch:{
    radio(newV,oldV){
      axios({
        method:'get',
        url:`http://localhost:8081/boss/getStatusList/${newV}`
      }).then(res => {
        this.tableData = res.data.data
        this.tableData.forEach( e => {
          this.srcList.push(e.img)
        })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.user-opt{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
